<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>05图片版电子时钟</title>
    <style>
        body {
            background: #000;
            color: #fff;
            font-size: 60px;
        }
    </style>
</head>

<body>
    <div id="time">
        <img src="img/0.png" alt="">
        <img src="img/0.png" alt="">
        <img src="img/0.png" alt="">
        <img src="img/0.png" alt="">&nbsp;-
        <img src="img/0.png" alt="">
        <img src="img/0.png" alt="">&nbsp;-
        <img src="img/0.png" alt="">
        <img src="img/0.png" alt="">&nbsp;&nbsp;

        <img src="img/0.png" alt="">
        <img src="img/2.png" alt="">&nbsp;:
        <img src="img/2.png" alt="">
        <img src="img/2.png" alt="">&nbsp;:
        <img src="img/2.png" alt="">
        <img src="img/2.png" alt="">
    </div>
</body>
<script src="common.js"></script>
<script>
    //需求：让时间可以走动，用图片显示时间

    (function () {

        // var time = getid('time');

        function gettime() {

            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour = date.getHours();
            var min = date.getMinutes();
            var sec = date.getSeconds();
            console.log(date);
            var str1 = year + toDb(month) + toDb(day);
            var str2 = toDb(hour) + toDb(min) + toDb(sec);
            var html = ''; //存拼接的img字符串
            var num = 0;

            var n = 0;
            for (var j in str1) {
                n++;
                html += `<img src="img/${str1[j]}.png" alt="">`
                if (n == 4 || n == 6) {
                    html += `&nbsp;-&nbsp;`
                }
            }
            html += '&nbsp;&nbsp;'

            for (var i in str2) {
                num++;
                html += `<img src="img/${str2[i]}.png" alt="">`;
                if (num % 2 == 0) {
                    html += `&nbsp;:&nbsp;`;
                }
            }

            html = html.slice(0, -7); //减掉最后多余的冒号

            time.innerHTML = html; //渲染
        }

        gettime();

        setInterval(gettime, 1000); //1000毫秒 == 1秒


    })();
</script>

</html>